<template>
    <div class="tabs-content">
          <!--*************************************************************历史申请***************************************************-->
                  <!-- 内容区域 -->
                  <el-table
                    ref="PastApplyDataList"
                    border
                    :data="PastApplyDataList"
                    height="73.5%"
                    style="width: 97.5%"
                    :header-cell-style="{height: '7vh'}"
                    :cell-style="cellStyle"
                  >
                    <el-table-column
                      type="index"
                      :index="getIndex"
                      width="55"
                      label="序号"
                      header-align="center"
                      align="center"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="processInstanceId"
                      label="流程ID"
                      header-align="center"
                      align="center"
                      v-if="flag===1">
                      </el-table-column>
                    <el-table-column
                      prop="instanceType"
                      label="申请类型"
                      header-align="center"
                      align="center">
                    </el-table-column>
                    <el-table-column
                      prop="description"
                      label="申请描述"
                      header-align="center"
                      align="center"
                      v-if="flag===1">
                    </el-table-column>
                    <el-table-column
                      prop="quantity"
                      label="天数"
                      header-align="center"
                      align="center"
                      v-if="flag===1">
                    </el-table-column>
                    <el-table-column
                      width="190"
                      prop="instanceStartTime"
                      label="申请时间"
                      header-align="center"
                      align="center">
                      <template slot-scope="scope" >
                        <span>{{renderTime(scope.row['instanceStartTime']) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      width="190"
                      prop="startDate"
                      label="开始时间"
                      header-align="center"
                      align="center">
                      <template slot-scope="scope" >
                        <span>{{renderTime(scope.row['startDate']) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      width="190"
                      prop="endDate"
                      label="结束时间"
                      header-align="center"
                      align="center">
                      <template slot-scope="scope" >
                        <span>{{renderTime(scope.row['endDate']) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="isEnded"
                      label="申请状态"
                      header-align="center"
                      align="center"
                      v-if="flag===1">
                    </el-table-column>
                    <el-table-column
                      prop="privacy"
                      label="私密性"
                      header-align="center"
                      align="center"
                      >
                      <template slot-scope="scope" >
                        <span>{{scope.row['privacy'] == 1 ? '公开' : '私密'}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="hurry"
                      label="急缓"
                      header-align="center"
                      align="center"
                      >
                      <template slot-scope="scope" >
                        <span>{{scope.row['privacy'] == 1 ? '一般' : '紧急'}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="path"
                      label="路径"
                      header-align="center"
                      align="center"
                      v-if="flag===1">
                    </el-table-column>
                    <el-table-column
                      prop="answer"
                      label="申请状态"
                      header-align="center"
                      align="center"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="answerComment"
                      label="审批描述"
                      header-align="center"
                      align="center"
                      v-if="flag===1">
                    </el-table-column>
                    <!-- <el-table-column
                      width="100"
                      header-align="center"
                      align="center"
                      label="操作"
                      >
                      <template slot-scope="scope">
                        <el-button size="small" type="primary" icon="el-icon-edit" @click="handleLook(scope.row)">查看</el-button>
                      </template>
                    </el-table-column> -->
                  </el-table>
                  <!-- 分页器 -->
                  <div class="block">
                    <el-pagination
                      align="right"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-size="pageSize"
                      layout="total, prev, pager, next, jumper"
                      :total="total">
                    </el-pagination>
                  </div>
    </div>
</template>

<script>

import axios from 'axios'

export default {
  name: 'PastApply',
  data() {
    return {
      // 时间范围限制
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.dataFormUpload.endDate) {
            // return (
            //   // time.getTime() > Date.now() - 8.64e6 ||
            //   time.getTime() > this.dataFormUpload.endDate /* 开始日期要在选择的结束日期之前*/
            // )
            return time.getTime() > this.dataFormUpload.endDate
          }
          // return time.getTime() < Date.now() - 8.64e7; /*今天及以后*/
          // return time.getTime() > Date.now() - 8.64e6 /* 今天及之前，注意数字不一样*/
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.dataFormUpload.beginDate) {
            // return (
            //   // time.getTime() > Date.now() - 8.64e6 ||
            //   time.getTime() < this.dataFormUpload.beginDate /* 结束日期要在选择的开始日期之后*/
            // )
            return time.getTime() < this.dataFormUpload.beginDate
          }
          // return time.getTime() > Date.now() - 8.64e6 /* 今天及之前*/
        }
      },
      options: [{
        value: '流程ID',
        label: '流程ID'
      }, {
        value: '申请类型',
        label: '申请类型'
      }, {
        value: '申请状态',
        label: '申请状态'
      }],
      // *******翻页*********************
      PastApplyDataList: [], // 历史申请数据列表
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页选定的显示条数
      total: 0,
      // ********************************
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      dialogFormVisible4: false,
      dialogFormVisible3: false,
      dataForm: {},
      dataFormExamine: {
        answer: '',
        answerComment: ''
      },
      postId: 0,
      flag: 0,
      array: [],
      user: {},
      authentication: '',
      tableDataArray3: []
    }
  },
  // 生命周期
  mounted(activeName) {
    this.getDataListHistory()
    this.user = JSON.parse(window.sessionStorage.getItem('user'))
    this.authentication = sessionStorage.getItem('tokenStr')
    // this.getData()
  },
  created() {
    this.user = JSON.parse(window.sessionStorage.getItem('user'))
  },
  computed: {
    header() {
      return {
        authentication: this.authentication
      }
    }
  },
  watch: {
    tableData(newValue, oldValue) {
      this.currentData = newValue.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    },
    CurrentPage(newValue, oldValue) {
      this.currentPage = this.tableData.slice((newValue - 1) * this.pageSize, newValue * this.pageSize)
    }
  },
  methods: {
    // 加载效果
    // getData() {
    //   const loading = this.$loading({
    //     lock: true, // lock的修改符--默认是false
    //     text: 'Loading', // 显示在加载图标下方的加载文案
    //     spinner: 'el-icon-loading', // 自定义加载图标类名
    //     background: 'rgba(0, 0, 0, 0.7)', // 遮罩层颜色
    //     target: document.querySelector('#table')// loadin覆盖的dom元素节点
    //   })
    //   // 成功回调函数停止加载
    //   loading.close()
    // },
    // 表格行高
    cellStyle() {
      return {
        'font-size': '14px',
        height: '45px',
        padding: '0'
      }
    },
    // 表头行高
    headerStyle() {
      return {
        height: '55px'
      }
    },
    // ****************翻页*************
    // 改变当前页码
    handleCurrentChange(val) {
      this.currentPage = val
      this.getDataListHistory()
    },
    // 序号
    getIndex(index) {
      return index + (this.currentPage - 1) * this.pageSize + 1
    },
    // *********************************
    // 时间格式转换
    renderTime(date) {
      var dateee = new Date(date).toJSON()
      return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    },
    // “历史申请“数据列表
    getDataListHistory(data) {
      var applyfind = 0
      // this.flag = 1
      this.getRequest('/process/hiInstance/' + this.user.name + '/' + applyfind + '/' + this.currentPage + '/' + this.pageSize).then((resp) => {
        if (resp) {
          // console.log('-------------hhhh------------------------------')
          // console.log(resp)
          var len = resp.data.length
          this.total = resp.data[len - 1].total
          this.tableDataArray3 = resp.data
          this.tableDataArray3.pop(resp.data[len - 1])
          this.PastApplyDataList = this.tableDataArray3
          console.log(this.PastApplyDataList)
        } else {
          console.log('查看历史申请失败')
        }
      })
    },
    // // 查看
    // handleLook(data) {
    //   this.dialogFormVisible = true
    //   this.dialogStatus = 'look'
    //   this.postId = data.id
    //   this.dataForm = data
    // },
    // lookData() {
    //   this.putRequest('process/processFile', {
    //     title: this.dataForm.title,
    //     workID: this.dataForm.workID,
    //     description: this.dataForm.description,
    //     uploadDate: this.dataForm.uploadDate
    //   }).then((resp) => {
    //     if (resp) {
    //       console.log(resp)
    //       this.$message.success(resp.msg)
    //       this.getDataList()
    //     } else {
    //       console.log('更新失败')
    //     }
    //   })
    //   this.dialogFormVisible = false
    // },
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>

<style scoped>
/* .right1{
  height: 500px;
}
.right2{
  height: 240px;
}
.right3{
  height: 150px;
}

.defineC{

  margin-left: 14px;
}

.demo-form-inline{
  width: 97%;
  display: flex;
  justify-content: space-between;
  margin: 20px auto;
  margin-bottom: 0px;
  margin-top: 5px;
}
.el-table{
  width: 97%;
  margin: 15px auto
}
.first{
  width: 97%;
  margin: 0px auto
}
.el-dialog__body{
  height: 150px !important;
  overflow: auto;
} */
@import '../../assets/css/top-form.css';
@import '../../assets/css/table.css';
.tabs-content {
  width: 100%;
  height: 78vh !important;
}
/** 分页器 start  */
.block {
  position: absolute;
  top: 94% !important;
  right: 1.5%;
}
.el-pagination {
  align-items: center;
}
.el-pagination /deep/ span:not([class*=suffix]) {
  font: 1vw '宋体' !important;
  padding-top: 0px;
}
.el-pagination /deep/ .el-pagination__total {
  padding-top: 5px !important;
}
.el-pagination /deep/ .el-input__inner {
  font: 1vw '宋体' !important;
}
/** 分页器 end */
</style>
